<div class="flex flex-col flex-auto w-full p-4 sm:p-4">
    <!-- Header -->
    <div class="flex items-center justify-between mb-4 mx-3">
        <!-- Title -->
        <h1 class="text-3xl font-medium tracking-tight leading-none">Agents</h1>
        <!-- Actions -->
        <div class="flex shrink-0 items-center">
            <!-- Search
            <mat-form-field
                    class="fuse-mat-dense fuse-mat-rounded min-w-64"
                    [subscriptSizing]="'dynamic'"
            >
                <mat-icon
                        class="icon-size-5"
                        matPrefix
                        [svgIcon]="'heroicons_solid:magnifying-glass'"
                ></mat-icon>
                <input
                        matInput
                        [formControl]="searchInputControl"
                        [autocomplete]="'off'"
                        [placeholder]="'Search agents'"
                />
            </mat-form-field>
            -->
            <!-- Refresh Button -->
            <button
                    class="ml-4"
                    mat-flat-button
                    [matTooltip]="'Refresh List'"
                    (click)="refreshAgents()"
                    [disabled]="isLoading()"
            >
                <mat-icon [svgIcon]="'heroicons_outline:arrow-path'"></mat-icon>
            </button>
            <!-- Add Button -->
            <button
                    class="ml-4"
                    mat-flat-button
                    [color]="'primary'"
                    [routerLink]="routes.nav.new()"
            >
                <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
                <span class="ml-2 mr-1">Add</span>
            </button>
        </div>
    </div>

    <!-- Main -->
    <div class="overflow-auto bg-card rounded-lg shadow">
        @let agents = agentsState();
        @switch (agents.status) {
            @case ('idle') {
                <div class="p-8 text-center text-xl font-medium tracking-tight sm:p-16">
                    <div class="col-span-full">Initializing...</div>
                </div>
            }
            @case ('loading') {
                <div class="p-8 text-center text-xl font-medium tracking-tight sm:p-16">
                    <div class="col-span-full">Loading agents...</div>
                </div>
            }
            @case ('success') {
                @if (agents.data.length > 0) {
                    <!-- Header for the list (inventory-grid) -->
                    <div class="inventory-grid text-secondary sticky top-0 z-10 grid gap-4 bg-gray-50 px-2 py-2 text-md font-semibold shadow dark:bg-black dark:bg-opacity-5 md:px-4">
                        <div class="w-10">
                            <mat-checkbox
                                class="compact-checkbox"
                                [checked]="isAllSelected()"
                                [indeterminate]="selection.hasValue() && !isAllSelected()"
                                (change)="masterToggle()"
                                >
                            </mat-checkbox>
                        </div>
                        <div>Name</div>
                        <div>State</div>
                        <div class="hidden lg:block">Type</div>
                        <div>User Prompt</div>
                        <div class="hidden md:block">Error/Output</div>
                        <div class="hidden lg:block">Cost</div>
                    </div>

                    <!-- Agent Rows: Loop over agentsState().data -->
                    @for (agent of agents.data; track trackByFn($index, agent)) {
                        <div class="inventory-grid grid items-center gap-4 border-b px-2 hover:bg-gray-50 md:px-4">
                            <!-- Checkbox cell -->
                            <div class="w-10">
                                <mat-checkbox
                                        class="compact-checkbox"
                                        (click)="$event.stopPropagation()"
                                        (change)="$event ? selection.toggle(agent) : null"
                                        [checked]="selection.isSelected(agent)">
                                </mat-checkbox>
                            </div>

                            <!-- Name cell with updated routerLink -->
                            <div [matTooltip]="agent.name">
                                <a class="hover:text-primary" [routerLink]="routes.nav.detail(agent.agentId)">
                                    {{ agent.name }}
                                </a>
                            </div>

                            <!-- State cell -->
                            <div>
                                <span [class]="getStateClass(agent.state)">{{ agent.state }}</span>
                            </div>

                            <!-- Type cell -->
                            <div class="hidden lg:block">{{ agent.type }}</div>

                            <!-- User Prompt cell with updated routerLink -->
                            <div [matTooltip]="agent.userPrompt">
                                <a class="hover:text-primary" [routerLink]="routes.nav.detail(agent.agentId)">
                                    <div class="max-h-8 truncate">{{ agent.userPrompt }}</div>
                                </a>
                            </div>

                            <!-- Error/Output cell -->
                            <div class="hidden md:block" [matTooltip]="agent.state === 'error' ? agent.error : agent.output">
                                <div class="max-h-8 truncate">
                                    {{ (agent.state === 'error' ? agent.error : agent.output) }}
                                </div>
                            </div>

                            <!-- Cost cell -->
                            <div class="hidden lg:block">
                                ${{ agent.cost | number: '1.2-2' }}
                            </div>
                        </div>
                    }
                } @else {
                    <!-- No Agents State with updated routerLink -->
                    <div class="border-t p-8 text-center text-3xl font-medium tracking-tight sm:p-16">
                        <div class="mb-1">There are no agents!</div>
                        <button
                                class="ml-4 mt-4"
                                mat-flat-button
                                [color]="'primary'"
                                [routerLink]="routes.nav.new()"
                        >
                            <mat-icon [svgIcon]="'heroicons_outline:plus'"></mat-icon>
                            <span class="ml-2 mr-1">Add Agent</span>
                        </button>
                    </div>
                }
            }
            @case ('error') {
                <div class="border-t p-8 text-center text-xl font-medium tracking-tight sm:p-16">
                    <div class="col-span-full">
                        Failed to load agents.
                        @if (agents.error?.message) {
                            <span>Error: {{ agents.error?.message }}</span>
                        }
                        <button
                            class="ml-2"
                            mat-stroked-button
                            color="warn"
                            (click)="refreshAgents()"
                        >Retry</button>
                    </div>
                </div>
            }
        }
    </div>

    <!-- Footer - Example for bulk actions -->
    @if (selection.hasValue()) {
        <div class="absolute bottom-0 left-0 right-0 z-20 flex items-center justify-between border-t bg-card px-6 py-3 shadow-lg dark:bg-gray-800 md:px-8">
            <div>
                <span class="text-lg font-medium">{{ selection.selected.length }}</span>
                <span class="text-secondary ml-1">selected</span>
            </div>
            <div class="flex items-center">
                <button
                    mat-flat-button
                    color="warn"
                    (click)="deleteSelectedAgents()"
                    [disabled]="isLoading()">
                    <mat-icon [svgIcon]="'heroicons_outline:trash'"></mat-icon>
                    <span class="ml-2">Delete Selected</span>
                </button>
            </div>
        </div>
    }
</div>
